<template>
  <div>
    <!--
      高阶组件向低阶组件传值：建议我们用于组件封装
      单向数据流，只是高阶组件向低阶组件

      传：
        provide(){
             return {
                属性名:属性值
             }
        }
      收
        inject:{
          属性名:{
            type:string
          }
        }
    -->
    <h1>{{ num }}</h1>
    <button @click="showLoading(true)">显示loading</button>
    <button @click="showLoading(false)">消失loading</button>
    <hr>
    <SonC />
  </div>
</template>
<script>
import SonC from './components/SonC.vue'
export default {
  components: {
    SonC
  },
  inject: {
    showLoading: {
      type: Function
    }
  },
  provide() {
    return {
      info: '明天休息',
      that: this,
      fn: this.fn
    }
  },
  data() {
    return {
      num: 0
    }
  },
  methods: {
    fn(str) {
      console.log(str)
    }
  }
}
</script>
<style>
</style>
